<template>
  <loading v-if="0 != loading" :status="loading" />
  <view v-else>
    <!-- <view style="" class="tabBar">
      <view style="width: 30%;" @click="back" >
        <image style="width: 40rpx;height: 40rpx;" src="../../../static/image/arrow_left.png"></image>
      </view>
      <view style="width: 30%;text-align: center;">积分记录</view>
      <view style="width: 30%;"></view>
    </view> -->
    <view class="main-container">

      <!-- 本地积分 -->
      <block v-if="searchType == 0">
        <view class="option-container-wrap">
          <view class="option-container">
            <view :class="'option-item  ' + (exType == 0 && show ? 'option-active' : '')" data-ex-type="0"
              @tap.stop.prevent="showPop">
              <text v-if="!selectType">全部</text>
              <text v-if="selectType">{{ typeName }}</text>
              <image class="icon-arrow"
                :src="staticBaseUrl + '/static/image/pointsPkg/image/' + (exType == 0 && show ? 'icon_drop-down@2x.png' : 'icon_sel@2x.png')">
              </image>
            </view>
            <view :class="'option-item  ' + (exType == 1 && show ? 'option-active' : '')" data-ex-type="1"
              @tap.stop.prevent="showPop">
              <text v-if="!selectDate">本月</text>
              <text v-if="selectDate">{{ startDate }} ~ {{ endDate }}</text>
              <image class="icon-arrow"
                :src="staticBaseUrl + '/static/image/pointsPkg/image/' + (exType == 1 && show ? 'icon_drop-down@2x.png' : 'icon_sel@2x.png')">
              </image>
            </view>
          </view>
        </view>
        
        <view class="total-point-container">
          <view class="curr-point-container">
            <view class="curr-point-content">
              <view class="curr-point">
                <view class="curr-local-point">
                  <image class="icon" :src="staticBaseUrl + '/static/image/pointsPkg/image/icon_local.png'"></image>
                  <text class="local-point-text">综合积分</text>
                  <text class="local-point-num">{{point}}</text>
                  <!-- <text class="local-point-txt">积分</text> -->
                </view>
              </view>
            </view>
          </view>
          <view class="due-container"><text class="curr-point-due">近30天到期积分{{expiredPoint}}</text></view>
        </view>       

        <view class="order-list" v-for="(value, key) in localPointObj" :key="key">
          <!-- 月 -->
          <view style="width: 100%; background: #FFFFFF; border-radius: 16rpx 16rpx 0 0;" v-if="value && value.length > 0">
            <view class="monthly-points">
              <view class="monthly-points-left">
                <text class="month-num">{{key.split("-")[0]}}</text>
                <text class="monthly-points-month">年</text>
                <text class="month-num">{{parseInt(key.split("-")[1])}}</text>
                <text class="monthly-points-month">月</text>
              </view>
              <!-- <view class="monthly-point-right">
                <text class="monthly-points-obtain">获取</text>
                <text class="obtain-num">{{monthPoint.find(obj=>obj.pointYearMonth==key).monthAddPoint}}</text>
                <text class="monthly-points-use">使用</text>
                <text class="use-num">{{monthPoint.find(obj=>obj.pointYearMonth==key).monthCutPoint}}</text>
              </view> -->
            </view>
          </view>
          <view v-if="value && value.length > 0" class="order-item-container">
            <view class="order-item" v-for="(item, index) in value" :key="index" @tap="navigateTo(item)">
              <view class="order-item-line2">
                <text class="line2-left">{{ item.goodsName|| '商品' }}</text>
                <view
                  :class="'detail-item-right ' + (item.status == '2' ? 'consume-point' : 'add-point')">
                  {{ addOrSub(item.status)}}{{ item.pointChangeValue }}
                </view> 
              </view>

              <view class="order-item-line3">
                <view class="line3-left">
                  <text>{{ item.createTime }}</text>
                  <!-- <text class="green-type">本地积分</text> -->
                </view>
                <view class="line3-right">
                  <!-- <text class="after-value">剩余:{{ item.AftEffectiveValue }}积分</text> -->
                </view>
              </view>
              <view style="width: 656rpx;
              height: 2rpx;
              border: 1rpx solid #EAEAEA; position:absolute; bottom: 0;" v-if="index != value.length - 1"></view>
            </view>
          </view>

          <view v-if="!value || value.length == 0" class="empty-container">
            <image class="empty-img" src="/static/image/home_ic_empty@2x.png"></image>
            <view>暂无相关记录</view>
          </view>
        </view>
      </block>

      <!-- 金融积分 -->
      <block v-if="searchType == 1">
        <view v-if="false">
          <view class="option-container-wrap">
            <view class="option-container">
              <view :class="'option-item ' + (detailType == index && show ? 'option-active' : '')"
                :data-detail-type="index" @tap.stop.prevent="showPop" v-for="(item, index) in detailOptionSelect"
                :key="index">
                <text>{{ item.text }}</text>

                <image class="icon-arrow"
                  :src="staticBaseUrl + '/static/image/pointsPkg/image/' + (detailType == index && show ? 'icon_drop-down@2x.png' : 'icon_sel@2x.png')">
                </image>
              </view>
            </view>
          </view>

          <view class="curr-point-container">
            <view class="curr-point-content">
              <view class="curr-point">
                <view class="curr-local-point">
                  <image class="icon" src="/static/image/pointsPkg/icon_bank.png"></image>
                  <text class="local-point-num">2900</text>
                  <text class="local-point-txt">积分</text>
                </view>
              </view>
            </view>
          </view>

          <view class="detail-order-container">
            <view class="detail-order-list">
              <view class="detail-order-item" v-for="(item, index) in detailOrderList" :key="index">
                <view class="detail-order-header">
                  <view class="detail-header-left">
                    <text class="detail-order-month">{{ item.month }}</text>
                    <text>月</text>
                  </view>
                  <view class="detail-header-right">
                    <view class="header-right-item1">
                      <text>获取</text>
                      <text class="font-yellow">{{ item.monthPoint }}</text>
                    </view>
                    <view class="header-right-item2">使用{{ item.monthUsedPoint }}</view>
                  </view>
                </view>

                <view class="detail-list">
                  <view class="detail-item" v-for="(order, index1) in item.orderList" :key="order.id">
                    <view class="detail-item-left">
                      <view class="detail-left-line1">{{ order.desc }}</view>
                      <view class="detail-left-line2">
                        <text class="detail-time">{{ order.time }}</text>
                        <text class="yellow-type">银行积分</text>
                      </view>
                    </view>

                    <view :class="'detail-item-right ' + (order.type == 0 ? 'consume-point' : 'add-point')">
                      {{ order.type == 0 ? '-' : '+' }}{{ order.point }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="empty-container">
          <image class="empty-img" src="/static/image/home_ic_empty@2x.png"></image>
          <view>暂无相关记录</view>
        </view>
      </block>

      <u-popup :overlay="true" :show="show" mode="top"
        customStyle="top:110rpx;height: 250rpx;z-index:9;box-shadow: 0px 14rpx 34rpx 6rpx rgba(182, 178, 199, 0.2);"
        @close="onClose">
        <view class="popup-container">
          <view class="filter-container">
            <block v-if="searchType == 0 && exType == 0">
              <text :data-item="item" :data-index="index"
                :class="'filter-item ' + (changeType == item.value ? 'filter-active' : '')" @tap.stop.prevent="selectOption"
                v-for="(item, index) in integralType" :key="index">
                {{ item.text }}
              </text>
            </block>
            <block v-if="searchType == 0 && exType == 1">
              <view class="date-container">
                <picker mode="date" :value="startDate" :start="minStartDate" :end="endDate" @change="bindStartDate">
                  <view class="date-picker">{{ startDate }}</view>
                </picker>
                <text>--</text>
                <picker mode="date" :value="endDate" :start="startDate" :end="maxEndDate" @change="bindEndDate">
                  <view class="date-picker">{{ endDate }}</view>
                </picker>
              </view>
            </block>
            <block v-else-if="searchType == 1">
              <text :data-item="item" :data-index="index"
                :class="'filter-item ' + (detailOptionSelect[detailType].index == index ? 'filter-active' : '')"
                @tap.stop.prevent="selectOption" v-for="(item, index) in detailOption[detailType]" :key="index">
                {{ item.text }}
              </text>
            </block>
          </view>
          <view class="filter-btns">
            <text class="reset-btn btn" @tap.stop.prevent="resetOption">重置</text>
            <text class="comfirm-btn btn" @tap.stop.prevent="onClose">确定</text>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>
<!-- <script module="util" lang="wxs" src="/utils/util.wxs"></script> -->
<script>
  import {
    http
  } from '@/utils/commonRequest.js'; // 局部引入 
  import loading from '@/components/loading/loading';
  const app = getApp();
	import {
		staticBaseUrl
	} from '@/utils/constant.js';
  const utils = require('../../../utils/util.js');

  var defaultExOption = [{
      text: '积分类型',
      value: null,
      index: 0
    },
    {
      text: '兑换状态',
      value: null,
      index: 0
    },
    {
      text: '本月',
      value: null,
      index: 0
    }
  ]; //兑换记录的初始化查询条件

  var defaultDetailOption = [{
      text: '全部',
      value: null,
      index: 0
    },
    {
      text: '本月',
      value: null,
      index: 0
    }
  ]; //积分明细的初始化查询条件

  export default {
    components: {
      loading
    },
    data() {
      return {
				staticBaseUrl: staticBaseUrl,
        loading: 1,
        //是否选择查询时间
        selectDate: false,

        //是否选择查询类型
        selectType: false,

        typeName: '',

        changeType: null,
        point: 0,
        localPointObj:{},
        monthPoint:[],
        // loading: true,
        //是否登录
        isLogin: false,
        //查询类型  0:兑换记录，1:积分明细
        searchType: 0,

        //兑换记录查询条件 0:积分类型，1:兑换状态，2:月份
        exType: 0,

        //积分明细查询条件 0:全部状态 1:月份
        detailType: 0,
        //是否显示弹窗
        show: false,

        //选择的兑换记录的查询条件
        exOptionSelect: JSON.parse(JSON.stringify(defaultExOption)),

        //选择的积分明细的查询条件
        detailOptionSelect: JSON.parse(JSON.stringify(defaultDetailOption)),


        integralType: [{
            text: '积分消费',
            value: 2
          },
          {
            text: '积分增加',
            value: 1
          }
        ],

        exOption: [
          [{
              text: '积分消费',
              value: 2
            },
            {
              text: '积分增加',
              value: 1
            }
          ],
          [{
              text: '全部',
              value: 0
            },
            {
              text: '已兑换',
              value: 1
            },
            {
              text: '未兑换',
              value: 2
            },
            {
              text: '已过期',
              value: 3
            }
          ],
          [{
              text: '本月',
              value: 0
            },
            {
              text: '六月',
              value: 1
            },
            {
              text: '五月',
              value: 2
            },
            {
              text: '四月',
              value: 3
            }
          ]
        ],

        //兑换记录的查询条件
        detailOption: [
          [{
              text: '全部',
              value: 0
            },
            {
              text: '获取',
              value: 1
            },
            {
              text: '使用',
              value: 2
            },
            {
              text: '已过期',
              value: 3
            }
          ],
          [{
              text: '本月',
              value: 0
            },
            {
              text: '上月',
              value: 1
            },
            {
              text: '近三月',
              value: 2
            },
            {
              text: '近半年',
              value: 3
            },
            {
              text: '近一年',
              value: 3
            }
          ]
        ],

        // 积分明细的查询条件
        localPointList: [],

        detailOrderList: [{
            id: 0,
            month: 7,
            monthPoint: 40,
            monthUsedPoint: 123456,
            orderList: [{
                id: 0,
                desc: '平台登录送积分_日常登录奖励',
                time: '2021.07.18  20:30:02',
                sourceType: 0,
                type: 0,
                point: 10
              },
              {
                id: 1,
                desc: '平台登录送积分_日常登录奖励',
                time: '2021.07.18  20:30:02',
                sourceType: 1,
                type: 1,
                point: 10
              }
            ]
          },
          {
            id: 1,
            month: 6,
            monthPoint: 50,
            monthUsedPoint: 223456,
            orderList: [{
                id: 0,
                desc: '平台登录送积分_日常登录奖励',
                time: '2021.07.18  20:30:02',
                sourceType: 0,
                type: 0,
                point: 10
              },
              {
                id: 1,
                desc: '平台登录送积分_日常登录奖励',
                time: '2021.07.18  20:30:02',
                sourceType: 1,
                type: 1,
                point: 10
              }
            ]
          }
        ],

        startDate: '',
        endDate: '',
        minStartDate: '',
        maxEndDate: '',
        exTypeOptionIndex: 0,
        detailTypeOptionIndex: 0,
        tallyInfo: '',
        pointList: '',
        expiredPoint:'',
        order: {
          id: '',
          desc: '',
          time: '',
          type: 0,
          point: ''
        },

        index: '',
        haveMore: true,

        queryParams: {
          startDate: '',
          endDate: '',
          changeType: '',
          pageSize: 10,
          pageNo: 1
        },
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
      let that = this; // that.getBankPoint();

      let searchType = options.searchType ? options.searchType : 0;
      let currentYear = new Date().getFullYear();
      let currentMonth = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() +
        1;
      let currentDay = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate(); //日期保留两位数
      let startDate = currentYear + '-' + currentMonth + '-' + '01';
      let endDate = currentYear + '-' + currentMonth + '-' + currentDay;
      this.initStartDate = startDate;
      this.initEndDate = endDate; //最多可以查询一年的记录

      let minStartDate = currentYear - 1 + '-' + currentMonth + '-' + currentDay;
      let maxEndDate = endDate;
      this.startDate = startDate,
        this.endDate = endDate,
        this.minStartDate = minStartDate,
        this.maxEndDate = maxEndDate,
        this.searchType = searchType
      this.$checkAuth().then((res) => {
        this.isLogin = true
        that.getLocalPoint();
      });
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
      this.$checkAuth().then((res) => {
        // if (res == 'authed') {
          this.isLogin = true
        // }
      });
    },
    onReachBottom: function() {
      if (this.haveMore) {
				this.queryParams.pageNo++;
        this.getLocalPoint();
      }
    },

    methods: {
      /**
       * 跳转到订单详情页面
       */
       navigateTo: function(item,e) {
        console.log("eeeeee", item);
        // var that = this;
        // var orderId = e.currentTarget.dataset.id;
        // var isRefund = e.currentTarget.dataset.isrefund;
        // var state = e.currentTarget.dataset.state;
        // var ordertype = e.currentTarget.dataset.ordertype; //isRefund为1或者2，说明是退款订单，跳转到售后详情
        var orderId = item.orderId;
        var isRefund = item.isrefund;
        var state = item.state;
        var ordertype = item.ordertype;
        var payId = item.sourceId;
        if(item.goodsType == '2'){
          uni.navigateTo({
					  url: '/subPackages/right/pages/myProfitsOrderDetail/myProfitsOrderDetail?payId=' + payId
					});
        }
        else if(item.goodsType == '1'){
          if (isRefund == 0 || isRefund == 3 || isRefund == 4 || state == 10) {
            uni.navigateTo({
              url: '/subPackages/orderPkg/pages/orderDetail/orderDetail?orderId=' + orderId
            });
          } else if (ordertype != 6) {
            uni.navigateTo({
              url: '/subPackages/orderPkg/pages/refundDetail/refundDetail?orderId=' + orderId
            });
          }
        }
      },

      back(){
        uni.navigateBack()
      },
      pointTimeFormate(Time) {
        if (Time == "" && !isNaN(Time) && Time != undefined) {
          return ''
        }
        return Time.substring(0, 4) + "/" + Time.substring(4, 6) + "/" + Time.substring(6, 8) + " " + Time.substring(8,
          10) + ":" + Time.substring(10, 12) + ":" + Time.substring(12, 14);
      },

      /**
       * 兑换记录和积分明细切换
       * @param {*} e
       */
      switchSearchType: function(e) {
        var searchType = e.currentTarget.dataset.searchType;
        this.searchType = searchType
      },

			// 收入 or 支出
			addOrSub: function(type){
				let value = '';
				if(type == '1'){ value = '+' }
				if(type == '2'){ value = '-' }
				return value
			},
			
      /**
       * 选择查询条件
       * @param {*} e
       */
      selectOption: function(e) {
        var index = e.currentTarget.dataset.index;
        var item = e.currentTarget.dataset.item;
        item.index = index;
        var searchType = this.searchType;

        if (0 == searchType) {
          // var exType = this.data.exType;
          // var exOptionSelect = this.data.exOptionSelect;
          // exOptionSelect[exType] = item;
          this.changeType = item.value
          this.typeName = item.text
        } else if (1 == searchType) {
          var detailType = this.detailType;
          var detailOptionSelect = this.detailOptionSelect;
          detailOptionSelect[detailType] = item;
          this.detailOptionSelect = detailOptionSelect
        }
      },

      /**
       * 显示选择弹窗
       * @param {*} e
       */
      showPop: function(e) {
        var searchType = this.searchType;
        var exType = this.exType;
        var detailType = this.detailType;
        if (0 == searchType) {
          exType = e.currentTarget.dataset.exType;
          this.exTypeOptionIndex = 0
        } else if (1 == searchType) {
          detailType = e.currentTarget.dataset.detailType;
          this.detailTypeOptionIndex = 0
        }
        this.show = !this.show
        this.exType = exType
        this.detailType = detailType
      },

      bindStartDate: function(e) {
        this.startDate = e.detail.value
      },

      bindEndDate: function(e) {
        this.endDate = e.detail.value
      },

      /**
       *重置查询条件
       */
      resetOption: function() {
        let that = this; //对象变量需要深复制

        if (0 == this.searchType) {
          if (this.exType == 0) {
            this.show = false,
              this.changeType = null,
              this.selectType = false,
              this.typeName = '',
              this.localPointList = []
          } else {
            this.show = false,
              this.selectDate = false,
              this.startDate = that.initStartDate,
              this.endDate = that.initEndDate,
              this.localPointList = []
          }

          this.queryParams.pageNo = 1;
          this.getLocalPoint();
        } else if (1 == this.searchType) {
          this.detailOptionSelect = JSON.parse(JSON.stringify(defaultDetailOption))
        }
      },

      /**
       * 确定按钮/关闭弹窗时触发
       */
      onClose() {
        if (this.exType == 0 && this.typeName !== '') {
          this.selectType = true
        } else if (this.exType == 1) {
          this.selectDate = true
        }
        this.show = false
        this.localPointList = []
        this.queryParams.pageNo = 1;
        this.getLocalPoint();
      },

      // https://aw.zjmtbank.com:30001/benefits/web-plat/mtBankInfo/pointList
      getExpiredPoint: function(){
        http.get('mtBankInfo/expiredPointQry').then((res)=>{
          console.log('expiredPointQry',res.data);
          if (res.data.code == '200') {
            this.expiredPoint = res.data.expiredPoint;
          }
        })
      },

      /**
       * 查询本地积分
       */
      getMonthPointObtain: function(key,monthPoint) {
        for(let i = 0; i < monthPoint.length; i++){
          if(key == monthPoint[i].pointYearMonth){
            return monthPoint[i].monthAddPoint;
          }
        }
      },
      getMonthPointUse: function(key,monthPoint) {
        for(let i = 0; i < monthPoint.length; i++){
          if(key == monthPoint[i].pointYearMonth){
            return monthPoint[i].monthCutPoint;
          }
        }
      },
      getYearMonth: function(dateStr) {
        const dateRegex = /^(\d{4})-(\d{2})/;
        const match = dateStr.match(dateRegex);
        if(match) {
          // return {
          //   year: parseInt(match[1], 10),
          //   month: parseInt(match[2], 10),
          // };
          let year = parseInt(match[1], 10);
          let month = parseInt(match[2], 10);
          return year + '-' + (month < 10 ? '0' + month : month);
        }
      },
      getLocalPoint: function() {
        this.getExpiredPoint();
        let that = this;
        let params = that.queryParams;
        let localPointList = that.localPointList;
        let startDate = that.startDate;
        let endDate = that.endDate;
				
        // this.queryParams.startDate = startDate.replaceAll('-', '');
        // this.queryParams.endDate = endDate.replaceAll('-', '');
				this.queryParams.startDate = `${startDate} 00:00:00`;
				this.queryParams.endDate = `${endDate} 23:59:59`;
        this.queryParams.changeType = that.changeType;
				// console.log('ch查询----',this.queryParams,params)
        http.get('mtBankInfo/pointList', {
            params: params
          })
          .then((res) => {
            // console.log(res);
						res = res.data;
            if ('200' == res.code) {
							let list = (res.point.pageParam && res.point.pageParam.list) || [];
							let pointList = [...localPointList, ...list];
							that.haveMore = res.point.pageParam && res.point.pageParam.hasNextPage;
              let point = res.point.totalPoint;
              // if (parseFloat(point) == parseInt(point)) {
              //   point = parseInt(point);
              // }
              if (utils.isEmpty(point) || point <= 0) {
                point = '0';
              }
							point = parseFloat(point)
							point = point.toFixed(1)
              that.point = point
              that.localPointList = pointList
              console.log("localPointList：",that.localPointList);
              // that.$store.commit("POINT_SET", point)
              that.loading = 0
              //----------------------------------------------
              //----------------------------------------------
              //----------------------------------------------
              //----------------------------------------------
              let localPointObj = {};
              that.localPointList.forEach(item => {
                if(!localPointObj[this.getYearMonth(item.createTime)]){
                  localPointObj[this.getYearMonth(item.createTime)] = [];
                }
                localPointObj[this.getYearMonth(item.createTime)].push(item);
              })
              that.localPointObj = localPointObj;
              console.log("localPointObj",localPointObj);
              that.monthPoint = res.point.list;
            } else {
              // that.loading = -1
							that.loading = 0
							utils.tips(res.data.msg)
              console.log('查询本地积分失败：', res.data.msg);
            }

          }).catch((err) => {
            console.log(err, 'err===')
            that.loading = -1
          });
      },

      /** 获取银行积分 */
      getBankPoint: function(params) {
        http.post('/zsnsh/integralQuery', {
          params: params
        }).then((res) => {
          if (res.data.code == '200') {
            let tallyInfo = JSON.parse(res.data.tallyInfo);
            this.tallyInfo = tallyInfo
          }
        });
      },

      /**
       * 积分请求
       */
      getPointList: function() {
        let that = this;
        http.get('/platform/getPlatErpFlag', {})
          .then((r) => {
            if ('1' == r.erpVipFlag) {
              let pointList = [];
              let point = r.totalPoint;

              if (parseFloat(point) == parseInt(point)) {
                point = parseInt(point);
              }

              if (undefined != r.pointList) {
                pointList = r.pointList;
              }

              for (let i = 0; i < pointList.length; i++) {
                pointList[i].erpVipFlag = '1';
              }
              this.pointList = pointList,
                this.point = point,
                this.loading = 0
            } else {}
          })
          .catch((er) => {
            that.refreshing = false;
            uni.stopPullDownRefresh();
          });
      }
    }
  };
</script>
<style scoped>
  .van-popup--top {
    top: 113rpx !important;
    border-radius: 0 0 24rpx 24rpx;
  }

  .nav-container {
    position: sticky;
    top: 0;
    z-index: 102;
    display: flex;
    padding-left: 54rpx;
    height: 118rpx;
    padding-top: 36rpx;
    box-shadow: 0px 14rpx 34rpx 6rpx rgba(182, 178, 199, 0.2);
    background-color: #fff;
  }

  .nav-item {
    position: relative;
    margin-right: 48rpx;
    line-height: 44rpx;
    color: #666;
    font-size: 32rpx;
  }

  .active {
    font-size: 36rpx;
    color: #000;
    font-weight: bold;
    line-height: 50rpx;
  }

  .active::after {
    position: absolute;
    content: ' ';
    width: 94%;
    height: 8rpx;
    bottom: 10rpx;
    left: 3%;
    background: #ff5642;
    border-radius: 4rpx;
  }

  .option-container-wrap {
    position: sticky;
    /* top: 80rpx; */
		top: 0;
    z-index: 991;
    background: #fff;
    padding: 0 24rpx 1rpx;
    /* box-shadow: 0px 20rpx 18rpx 4rpx rgba(182, 178, 199, 0.2); */
    z-index: 99999
  }

  .option-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 20rpx 50rpx 0;
  }

  .option-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: auto;
    font-size: 28rpx;
    height: 92rpx;
    line-height: 40rpx;
    color: #3f4548;
  }

  .option-active {
    background: #fff8f8;
    border-radius: 24rpx 24rpx 0px 0px;
    color: #ff6e42;
    overflow: hidden;
  }

  .icon-arrow {
    margin-left: 6rpx;
    width: 32rpx;
    height: 32rpx;
    flex-shrink: 0;
  }

  /* 弹出框样式 */

  .popup-container {
    display: flex;
    flex-direction: column;
    height: 250rpx;
    background: #fff;
  }

  .filter-container {
    overflow-x: scroll;
    display: flex;
    align-items: center;
    padding: 0 48rpx;
    /* flex: 1; */
    height: 140rpx;
    -webkit-overflow-scrolling: touch;
  }

  .filter-item {
    padding: 0 28rpx;
    line-height: 56rpx;
    color: #999;
    font-size: 28rpx;
    background: #fff;
    border-radius: 28rpx;
    margin-right: 32rpx;
    flex-shrink: 0;
  }

  .filter-active {
    background-color: rgba(255, 110, 66, 0.1);
    color: #ff6e42;
  }

  .filter-btns {
    display: flex;
  }

  .btn {
    flex: 0 0 50%;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }

  .reset-btn {
    background-color: #fff;
    color: #000;
  }

  .comfirm-btn {
    color: #fff;
    background: #ff6e42;
  }

  /* 兑换订单列表 */

  .order-list {
    margin-top: 30rpx;
    padding: 0 24rpx;
  }

  .order-item-container{
    box-shadow: 0rpx 14rpx 34rpx 6rpx rgba(182,178,199,0.2);
    border-radius: 0 0 16rpx 16rpx;
    margin-bottom: 24rpx;
  }
  .order-item {
    padding: 24rpx;
    background-color: #fff;
    overflow: hidden;
    position: relative;
  }

  .order-item-line1,
  .order-item-line2,
  .order-item-line3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .order-item-line1 {
    margin-top: 28rpx;
  }

  .line1-left {
    line-height: 28rpx;
    font-size: 24rpx;
    color: #999;
  }

  .line1-right {
    line-height: 42rpx;
    font-size: 30rpx;
    line-height: 42rpx;
    font-weight: bold;
    color: #999;
  }

  .red-color {
    color: #ed171f;
  }

  .order-item-line2 {
    font-size: 30rpx;
    color: #000;
    line-height: 42rpx;
  }

  .line2-left {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 486rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
  }

  .line2-right {}

  .order-item-line3 {
    margin-top: 24rpx;
  }

  .line3-left {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 24rpx;
  }

  .line3-right {
    color: #999;
    font-size: 24rpx;
  }

  .order-amount {
    margin-left: 10rpx;
    letter-spacing: -1px;
  }

  .green-type,
  .yellow-type {
    margin-left: 24rpx;
    border-radius: 4rpx;
    font-size: 24rpx;
    line-height: 38rpx;
    padding: 0 10rpx;
  }

  .green-type {
    background: rgba(68, 215, 182, 0.06);
    color: #44d7b6;
    border: 1px solid #adfceb;
  }

  .yellow-type {
    background: rgba(255, 110, 66, 0.06);
    border: 1px solid #ffd7cb;
    color: #ff6e42;
  }

  /* 明细订单列表 */

  .detail-order-container {
    padding: 0 30rpx;
    margin-top: 30rpx;
  }

  .total-point-container{
    width: 94%;
    height: 144rpx;
    border-radius: 16rpx;
    background-color: #fff;
    margin: 24rpx auto;
    position: relative;
  }

  .curr-point-container {
    position: relative;
    display: flex;
    align-items: center;
    margin: 24rpx auto 0;
    padding: 0 24rpx;
    width: 100%;
    height: 100rpx;
    color: #000;
    /* top: 80rpx; */
    border-radius: 16rpx;
    overflow: hidden;
    background-color: #fff;
  }

  .point-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  
  .due-container {
    width: 682rpx;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 29rpx;
  }

  .curr-point-due {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #F35C56;
    line-height: 34rpx;
    text-align: right;
    font-style: normal;
  }

  .curr-point-content {
    position: relative;
    display: flex;
    align-items: center;
  }

  .curr-point-title {
    font-size: 40rpx;
    line-height: 56rpx;
    font-weight: bold;
  }

  .curr-point {
    display: flex;
    align-items: center;
    font-size: 24rpx;
  }

  .curr-local-point {
    display: flex;
    align-items: center;
    margin-right: 40rpx;
  }

  .icon {
    margin-right: 18rpx;
    width: 48rpx;
    height: 48rpx;
  }

  .local-point-text {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
  }

  .local-point-num {
    font-size: 48rpx;
    font-weight: 600;
    /* margin-right: 16rpx; */
    position: absolute;
    right: -425rpx;

  }

  .local-point-txt {
    font-size: 24rpx;
    color: #666;
    position: relative;
    top: 4rpx;
  }

  .detail-order-list {}

  .detail-order-item {
    overflow: hidden;
    margin-bottom: 24rpx;
    background-color: #fff;
    border-radius: 24rpx;
  }

  .detail-order-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx;
    height: 110rpx;
    box-shadow: 0px 6rpx 32rpx 6rpx rgba(182, 178, 199, 0.2);
  }

  .detail-header-left {
    display: flex;
    align-items: flex-end;
    color: #000;
    font-size: 24rpx;
  }

  .detail-order-month {
    font-size: 54rpx;
    font-weight: bold;
    line-height: 66rpx;
  }

  .detail-header-right {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: bold;
  }

  .header-right-item1 {
    margin-right: 30rpx;
  }

  .font-yellow {
    color: #ff6e42;
  }

  .detail-list {
    padding: 0 24rpx;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    height: 136rpx;
    padding-top: 26rpx;
    border-bottom: 1px solid #eaeaea;
  }

  .detail-item:last-child {
    border-bottom: none;
  }

  .detail-item-left {
    flex-shrink: 0;
    width: 520rpx;
  }

  .detail-left-line1 {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 28rpx;
    color: #000;
    line-height: 36rpx;
  }

  .detail-left-line2 {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
  }

  .detail-time {
    color: #999;
    font-size: 20rpx;
  }

  .detail-item-right {
    flex: 1;
    font-size: 28rpx;
    text-align: right;
  }

  .consume-point {
    color: #666;
  }

  .add-point {
    font-weight: bold;
    color: #ff6e42;
  }

  /* 空列表 */
  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    color: #999;
    padding-top: 200rpx;
  }

  .empty-img {
    width: 644rpx;
    height: 310rpx;
  }

  .date-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 28rpx;
    color: #333;
  }

  .date-picker {
    line-height: 2;
    padding: 0px 20rpx;
    border-radius: 12rpx;
    background-color: #efefef;
  }

  .tabBar {
    font-size: 32rpx;
    font-weight: 700;
    align-items: center;
    width: 90%;
    margin-left: 5%;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0rpx;
    z-index: 9999999;
    background-color: #ffffff;
  }
  
  /deep/ .u-safe-bottom{
    padding-bottom: 0 !important;
  }

  .monthly-points{
    width: 670rpx;
    height: 109rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .month-num{
    font-family: HelveticaNeue, HelveticaNeue;
    font-weight: bold;
    font-size: 54rpx;
    color: #000000;
    line-height: 66rpx;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    margin-top: 20rpx;
    /* margin-left: 24rpx; */
  }

  .monthly-points-month{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    line-height: 34rpx;
    text-align: left;
    font-style: normal;
    margin-left: 2rpx;
  }

  .monthly-point-right{
    display: flex;
    justify-content: flex-end;
  }

  .monthly-points-obtain{
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    margin-right: 2rpx;
  }

  .obtain-num{
    font-family: HelveticaNeue, HelveticaNeue;
    font-weight: bold;
    font-size: 28rpx;
    color: #F35C56;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    margin-right: 30rpx;
  }

  .monthly-points-use{
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    margin-right: 2rpx;
  }

  .use-num{
    font-family: HelveticaNeue, HelveticaNeue;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
  }

</style>
